<template>
  <div class="risk">
    <eagle-tab-page-list
      ref="pageTabList"
      url="/WhAccidentInitialReport/GetPageData"
      :params="params"
      placeholder="请输入事故名称,事故编号搜索"
      @initActive="_initActive"
      @initList="_initList"
    >
      <template v-if="this.active === 0">
        <eagle-cell
          style="margin-top: 10px"
          class="card"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="warn_item">
            <div @click="view(item)">
              <eagle-row
                gutter="15"
                style="word-break:break-all"
              >
                <eagle-col>
                  <b style="font-size: 13px">{{ item.AccidentName }}</b>
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="15">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />事故编号：{{ item.IncidentNumber }}
                </eagle-col>
              </eagle-row>
              <!-- <van-row gutter="20">
                                <van-col style="word-break:break-all" >
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_type.png" />事故名称:{{ item.AccidentName }}
                                </van-col>
                            </van-row> -->

              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                  />事故发生日期：{{ item.AccidentDate | formatDateTime }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />事故分类：{{ item.AttidentClassification }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />事故分级：{{ item.AttidentgRading }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />潜在风险：{{ item.PotentialRisk }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                  />创建人：{{ item.CreateChnName }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                  />创建日期：{{ item.CreateDate | formatDateTime }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />区域部门：{{ item.AccidentDepartmentName }}
                </eagle-col>
              </eagle-row>
              <van-divider />
              <!-- <eagle-button class="ml-10 mb-5" style="float: right;height:30px;" v-if="item.Status ==10" size="small" type="default" @click="userChooseDialog(item)">指派调查组长
                                </eagle-button> -->
            </div>
            <div class="op_btn">
              <div
                class="btn_item"
                v-if="item.Status ==10"
                @click="userChooseDialog(item)"
              >
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />
                <div class="mr-10">指派调查组长</div>
              </div>
            </div>
          </div>
        </eagle-cell>
      </template>
      <template v-if="this.active === 1">
        <eagle-cell
          style="margin-top: 10px"
          class="card"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="warn_item">
            <div @click="view(item)">
              <b style="font-size: 13px">{{ item.AccidentName }}</b>
              <eagle-row gutter="15">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />事故编号：{{ item.IncidentNumber }}
                </eagle-col>
              </eagle-row>
              <!-- <van-row gutter="20">
                                <van-col style="word-break:break-all" >
                                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_type.png" />事故名称:{{ item.AccidentName }}
                                </van-col>
                            </van-row> -->

              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                  />事故发生日期：{{ item.AccidentDate | formatDateTime }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />事故分类：{{ item.AttidentClassification }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />事故分级：{{ item.AttidentgRading }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />潜在风险：{{ item.PotentialRisk }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                  />调查组长：{{ item.UserChnName1 }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_date.png"
                  />创建日期：{{ item.CreateDate | formatDateTime }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20">
                <eagle-col>
                  <img
                    class="icon"
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                  />区域部门：{{ item.AccidentDepartmentName }}
                </eagle-col>
              </eagle-row>
              <van-divider />
            </div>
          </div>
        </eagle-cell>
      </template>
    </eagle-tab-page-list>
    <user-choose-dialog
      title="选择调查组长"
      :show.sync="userChooseDialogShow1"
      :IsAccounted="true"
      :isMulti="false"
      @callback="userChooseCallback1"
    >
    </user-choose-dialog>
  </div>
</template>
<script>
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
import DialogPageList from "@/components/DialogPageList.vue";
import PageTabList from "@/components/PageTabList/PageTabList.vue";
export default {
  components: {
    UserChooseDialog,
    PageTabList,
    DialogPageList,
  },
  data() {
    return {
      value: "",
      list: [],
      AccidentNumber: "",
      userChooseDialogShow1: false,
      active: 0,
      params: [
        {
          title: "待指派",
          dataType: "ToBeAssigned",
        },
        {
          title: "已指派",
          dataType: "Assigned",
        },
      ],
      listUser: [],
    };
  },
  created() {},
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    userChooseDialog(item) {
      this.userChooseDialogShow1 = true;
      this.AccidentNumber = item.AccidentNumber;
    },
    userChooseCallback1(data) {
      if (data.length == 0) {
        this.$toast("您还未选择指派组长");
        return false;
      }
      this.loading = true;
      var form1 = {};
      var UserNames = [];
      var list2 = [];
      UserNames.push(data.code);
      // data.map((item) => {

      // });
      this.list.map((item) => {
        if (item.AccidentNumber != this.AccidentNumber) {
          list2.push(item);
        }
      });
      form1.UserNames = UserNames;
      form1.IsAssist = false;
      form1.AccidentNumber = this.AccidentNumber;
      this.AccidentNumber = "";
      let _this = this;
      _this.$axios
        .post("/WhAccidentInitialReportSend/Save", form1)
        .then((res) => {
          _this.loading = false;
          _this.userChooseDialogShow1 = false;
          _this.$toast.success("指派成功！");
          setTimeout(() => {
            _this._initList(list2);
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },

    GetStatus(val) {
      if (val == 0) {
        return "未提交";
      } else if (val == 5) {
        return "审批中";
      } else {
        return "已审批";
      }
    },

    view(item) {
      this.$router.push({
        path: "whAccidentInitialReportView",
        query: { id: item.ID },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.phone {
  position: relative;
  .code {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 12px;
  }
}
.register-info {
  background-color: #e8f1f8;
  padding-bottom: 20px;
}
.img-box {
  height: 50px;
  width: 50px;
  padding: 10px;
  position: absolute;
  left: 50%;
  top: 60px;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.popup-title {
  line-height: 35px;
  padding: 10px;
  font-size: 15px;
  padding-left: 20px;
}

.op_btn {
  display: flex;
  justify-content: flex-end;
  .btn_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}

.van-divider {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>